<template>
    <div style="height:100%">
      <div class="container">
        <operation>
          <template #left>
            <el-form label-width="70px">
              <el-form-item label="用户姓名">
                <el-input v-model="form.name" placeholder="请输入..." style="width:140px"></el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input v-model="form.idNumber" placeholder="请输入..." style="width:140px"></el-input>
              </el-form-item>
              <!-- 出发地址 -->
              <el-form-item  rm-item label="出发地址">
                <el-cascader
                  ref="depart"
                  clearable
                  placeholder="请选择..."
                  size="large"
                  :options="options"
                  v-model="departOptions"
                  @change="departsite"
                  :filterable="true"
                  style="width:180px">
                </el-cascader>
              </el-form-item>
              <!-- 到达地址 -->
              <el-form-item  rm-item label="到达地址">
                <el-cascader
                  ref="arrive"
                  clearable
                  placeholder="请选择..."
                  size="large"
                  :options="options"
                  v-model="arriveOptions"
                  @change="arrivesite"
                  :filterable="true"
                  style="width:180px">
                </el-cascader>
              </el-form-item>
            </el-form>
          </template>
          <template #right>
            <el-button native-type="submit" plain class="search" @click.prevent="search">查询</el-button>
            <el-button plain class="reset" @click="reset">重置</el-button>
          </template>
        </operation>
        <!-- 审核往返信息填报 -->
        <el-button class="audit" type="primary" plain @click="$router.push('/auditInformation')">审核往返信息填报</el-button>
        <!-- 信息表格 -->
        <el-card class="table-card">
          <el-table
            height=400
            :data="userdata"
            border
            style="width: 100%">
            <el-table-column
              prop="name"
              label="用户姓名"
              align="center"
              fixed
              width="90">
            </el-table-column>
            <el-table-column
              label="用户性质"
              align="center"
              fixed
              width="90">
              <template slot-scope="scope"><span>{{ scope.row.type | userType }}</span></template>
            </el-table-column>
            <el-table-column
              prop="idNumber"
              label="身份证号"
              fixed
              align="center"
              width="170">
            </el-table-column>
            <el-table-column
              prop="mobile"
              label="手机号"
              align="center"
              fixed
              width="120">
            </el-table-column>
            <el-table-column
              label="往返类型"
              align="center"
              width="90">
              <template slot-scope="scope"><span>{{ scope.row.RoundTripType | RoundTrip }}</span></template>
            </el-table-column>
            <el-table-column
              prop="setoutTime"
              label="出发时间"
              align="center"
              width="120">
            </el-table-column>
            <el-table-column
              prop="setoutArea"
              label="出发地区"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="setoutDetailedArea"
              label="详细地址"
              align="center"
              width="200">
            </el-table-column>
            <el-table-column
              prop="arriveArea"
              label="到达地区"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="arriveDetailedArea"
              label="详细地址"
              align="center"
              width="200">
            </el-table-column>
            <el-table-column
              prop="traffic"
              label="交通"
              align="center"
              width="110">
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="10">
          </el-pagination>
        </el-card>
      </div>
    </div>
</template>

<script>
import { regionData, codeToText } from 'element-china-area-data';
import operation from '@/components/operation/index.vue';
import { userRoundTrip } from '@/api/user';

export default {
  components: {
    operation,
  },
  name: '',
  data() {
    return {
      form: {
        name: '',
        idNumber: '',
        departsite: '',
        arrivesite: '',
      },
      options: regionData,
      departOptions: [],
      arriveOptions: [],
      userdata: [],
      page: '1',
      pagesize: '10',
      count: 0,
    };
  },
  methods: {
    departsite(value) {
      this.departsite = codeToText[value[0]] + codeToText[value[1]] + codeToText[value[2]];
    },
    arrivesite(value) {
      this.arrivesite = codeToText[value[0]] + codeToText[value[1]] + codeToText[value[2]];
    },
    async search() {
      const res = await userRoundTrip({
        _page: this.page,
        _limit: this.pagesize,
        name_like: this.form.name,
        idNumber_like: this.form.idNumber,
        setoutArea_like: this.form.departsite,
        arriveArea_like: this.form.arrivesite,
      });
      this.userdata = res.data;
    },
    reset() {
      this.form.name = '';
      this.form.idNumber = '';
      this.$refs.depart.$refs.panel.checkedValue = [];
      this.$refs.arrive.$refs.panel.checkedValue = [];
      this.getList();
    },
    async getList() {
      const res = await userRoundTrip({
        _page: this.page,
        _limit: this.pagesize,
      });
      this.userdata = res.data;
      console.log(res);
    },
  },
  created() {
    this.$emit('active', 'userGoto');
    this.getList();
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.el-form {
  display: flex;
}

.el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}

.audit {
  width: 12%;
  margin: 10px 0;
}

.table-card {
  flex-grow: 1;
}

.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>
